<template>
  <div>
    <sb-tip
      >sb-table组件中整合了分页、多选和搜索条件，以及处理了最后一页删光了的情况，调用简单</sb-tip
    >
    <SearchPanel>
      <template #line2-1>
        <a-form-item label="关键字">
          <a-input
            style="min-width: 300px"
            v-model:value="localParams.keywords"
            placeholder="分类名称"
          ></a-input>
        </a-form-item>
      </template>
      <template #line2-2>
        <sb-btn-r @click="$refs.tb.refresh()" />
        <sb-btn-d :disabled="select0" style="margin-left: 50px"
          >批量删除</sb-btn-d
        >
      </template>
    </SearchPanel>
    <h1>当前Keys={{ selectedKeys }}</h1>
    <sb-table
      ref="tb"
      :cols="cols"
      :load="getList"
      v-model:selectedKeys="selectedKeys"
    >
      <template #action="{ text: { id } }">
        <div>
          <sb-btn-print @click="msg" size="small"></sb-btn-print>
          <sb-split-line />
          <sb-btn-d @click="handleDelete(id)" size="small"></sb-btn-d>
        </div>
      </template>
    </sb-table>
    <HighLightHTML :html="html" :js="js" />
  </div>
</template>

<script>
import { SbTable, SearchPanel, HighLightHTML } from "~components";
import cols from "./cols";
export default {
  components: {
    SbTable,
    SearchPanel,
    HighLightHTML,
  },
  data() {
    return {
      cols,
      selectedKeys: [],
      localParams: {
        keywords: "",
      },
    };
  },
  methods: {
    msg() {
      this.$mi("只是演示而已，嘿嘿", "可以看综合案例->订单列表->详情中的打印");
    },
    getList(params) {
      let query = Object.assign({}, params, this.localParams);
      return this.$get("/order/list", query);
    },
    async handleDelete(orderId) {
      await this.$mc("删除后将无法恢复，确定删除？");
      let { success } = await this.$post("/order/del", { orderId });
      if (success) this.$ms("删除成功!");
      this.$refs.tb.loadData();
    },
  },
  computed: {
    select0() {
      return this.selectedKeys.length === 0;
    },
    html(){
      return `
      <sb-table
        ref="tb"
        :cols="cols"
        :load="getList"
        v-model:selectedKeys="selectedKeys"
      >
        <template #action="{ text: { id } }">
            <sb-btn-d @click="handleDelete(id)" size="small"></sb-btn-d>
        </template>
      </sb-table>
      `
    },
    js(){
      return `
      data() {
        return {
          cols, //略
          selectedKeys: [],
          localParams: {
            keywords: "",
          },
        };
      },
      methods: {
        getList(params) {
          let query = Object.assign({}, params, this.localParams);
          return this.$get("/order/list", query);
        },
        async handleDelete(orderId) {
          await this.$mc("删除后将无法恢复，确定删除？");
          let { success } = await this.$post("/order/del", { orderId });
          if (success) this.$ms("删除成功!");
          this.$refs.tb.loadData();
        },
      },
      computed: {
          select0() {
            return this.selectedKeys.length === 0;
          }
      }
      `
    }
  },
};
</script>

<style scoped lang='scss'>
</style>